<template>
  <div class="dashboard-container">
    <main class="dashboard-main">
      <!-- 订单数据 -->
      <OrderData />
      <!-- 复购单统计 -->
      <ReorderStic />
      <!-- 其他信息:今日待跟进,订单复购分析,大单占比,ROI转化,库存预警 -->
      <div class="other-info">
        <div class="other-info-left">
          <div class="other-info-left-item">
            <TodayFollowUp />
          </div>
          <div class="other-info-left-item">
            <OrderRepurchase />
          </div>
          <div class="other-info-left-item">
            <!-- 业务员业绩排名 -->
            <SalesPerformanceRanking />
          </div>
        </div>
        <div class="other-info-right">
          <BigOrderRatio />
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
// 订单数据
import OrderData from "./components/orderData.vue";
// 复购单统计
import ReorderStic from "./components/reorderStic.vue";
// 今日待跟进
import TodayFollowUp from "./components/todayFollowUp.vue";
// 订单复购分析
import OrderRepurchase from "./components/orderRepurchase.vue";
// 大单占比
import BigOrderRatio from "./components/bigOrderRatio.vue";
// 业务员业绩排名
import SalesPerformanceRanking from "./components/salesPerformanceRanking.vue";
</script>

<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: scroll;

  .data-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;

    :deep(.el-segmented) {
      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
      padding: 6px;
      border-radius: 50px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

      .el-segmented__item {
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1px;
        padding: 12px 32px;
        transition: all 0.3s ease;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
      }

      .el-segmented__item.is-selected {
        background: linear-gradient(135deg, #ffb347, #ffcc33);
        color: #000;
        border-radius: 40px;
        box-shadow: 0 0 16px rgba(255, 204, 51, 0.9);
        transform: scale(1.05);
      }
    }
  }

  .dashboard-main {
    flex: 1;

    .other-info {
      display: flex;
      margin-top: 10px;

      .other-info-left {
        flex: 1;
        // 一排展示俩
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;

        .other-info-left-item {
          border-radius: 8px;
          overflow: hidden;
        }

        // 单独占两格子
        .other-info-left-item:nth-child(3) {
          grid-column: span 2;
        }
      }
      .other-info-right {
        width: 396px;
        height: 696px;
        border-radius: 8px;
        margin-left: 10px;
      }
    }
  }
}
</style>
